<template>
  <a-card :bordered="false" :title="t('org.user.formBasicinfoTitle')">
    <template #extra>
      <qc-save-button @click="onSubmit"></qc-save-button>
    </template>
    <a-form ref="userFormRef" :model="userModel" :rules="userFormRule" v-bind="layout">
      <a-row>
        <a-col :xs="24" :xl="18">
          <a-form-item
            name="userAccount"
            :label="t('org.user.userAccount')"
            :extra="userModel.userId ? '' : t('org.user.formExtraUserAccount')"
          >
            <a-input
              :disabled="userModel.userId ? true : false"
              :placeholder="t('org.user.formPlhUserAccount')"
              v-model:value="userModel.userAccount"
            />
          </a-form-item>
          <a-form-item name="userName" :label="t('org.user.userName')">
            <a-input v-model:value="userModel.userName" :placeholder="t('org.user.formPlhUserName')" />
          </a-form-item>
          <a-form-item name="userBrithday" :label="t('org.user.userBrithday')">
            <a-date-picker style="width: 100%" v-model:value="userModel.userBrithday" valueFormat="YYYY-MM-DD" />
          </a-form-item>
          <a-form-item :label="t('org.user.userSex')">
            <qc-dictionary-select
              :placeholder="t('org.user.formPlhUserSex')"
              codeItemId="ORG_USER_SEX"
              v-model:value="userModel.userSex"
            ></qc-dictionary-select>
          </a-form-item>
          <a-form-item name="userPhone" :label="t('org.user.userPhone')">
            <a-input v-model:value="userModel.userPhone" :placeholder="t('org.user.formPlhUserPhone')" />
          </a-form-item>
          <a-form-item name="userEmail" :label="t('org.user.userEmail')">
            <a-input v-model:value="userModel.userEmail" :placeholder="t('org.user.formPlhUserEmail')" />
          </a-form-item>
          <a-form-item name="userIntroduce" :label="t('org.user.userIntroduce')">
            <a-textarea
              v-model:value="userModel.introduce"
              showCount
              :maxlength="500"
              :placeholder="t('org.user.formPlhUserIntroduce')"
            />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="6" v-show="userModel.userId">
          <user-avatar
            :avatar-url="userModel.userAvatar"
            :user-id="userModel.userId"
            @upload-avatar-success="uploadAvatarSuccess"
          ></user-avatar>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>
<script lang="ts">
import { useI18n } from 'vue-i18n'
import { defineComponent, ref } from 'vue'
import { userFormRule, userEditPageUrl } from '../interface'
import userApi from '/@/api/org/user'
import { useModelForm } from '/@/kit/model-kit'
import UserAvatar from './user-avatar.vue'
import { FileInfo } from '/@/_types/file'
import { reload } from '/@/kit/common-kit'

export default defineComponent({
  props: {
    userId: String, //用户id 可以不存在 不存在即为新增页面
    deptId: String, //部门id 可以不存在 在新增用户的情况下如果存在deptId,则添加部门与新增用户的关联
  },
  components: {
    UserAvatar,
  },
  setup(props) {
    const { t } = useI18n()

    const userFormRef = ref()
    const userModel = ref({
      userId: props.userId,
      userAvatar: null,
    })
    const layout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
    }
    const { save } = useModelForm(userFormRef, userModel, props.userId, userApi, {
      editPageUrl: userEditPageUrl,
    })

    //提交方法
    const onSubmit = () => save()

    const uploadAvatarSuccess = (fileInfo: FileInfo) => {
      // userModel.value.userAvatar = fileInfo.file.response.data.fileId
      // userApi.update(userModel.value).then((res) => {
      //   userModel.value = res.data.data
      // })
      reload()
    }

    return {
      t,
      userFormRef,
      userModel,
      userFormRule,
      layout,
      onSubmit,
      uploadAvatarSuccess,
    }
  },
})
</script>

